<style secoped>
.hdp {
  width: 100%;
  height: 100vh;
}
.bc-one {
  background-color: #fafafa;
}
.bc-two {
  background-color: rgba(250, 250, 250, 0.9);
}
.fullpage-box {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 100vh;
}
.zz {
  width: 100%;
  height: 100%;
  background-color: rgba(250, 250, 250, 0.8);
}
.hdp-box {
  width: 100vw;
  height: 500%;
  min-width: 1200px;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 1s;
}
.bc-img1 {
  background: url("../assets/img/4.jpg") no-repeat 50% 50%/100% 100%;
}
.bc-img2 {
  background: url("../assets/img/3.jpg") no-repeat 50% 50%/100% 100%;
}
</style>
<template>
  <div class="fullpage-box">
    <mine-nav ref="nav"></mine-nav>
    <div class="hdp-box" ref="hdpbox">
      <div class="hdp bc-one">
        <mine-about-me></mine-about-me>
      </div>
      <div class="hdp bc-img1">
        <div class="zz">
          <mine-intention></mine-intention>
        </div>
      </div>
      <div class="hdp bc-one">
        <mine-work></mine-work>
      </div>
      <div class="hdp bc-img2">
        <div class="zz">
          <mine-technology ref="tg"></mine-technology>
        </div>
      </div>
      <div class="hdp bc-one">
        <mine-tell></mine-tell>
      </div>
    </div>
  </div>
</template>

<script>
import MineNav from "./mine/Mine-nav.vue";
import MineAboutMe from "./mine/Mine-aboutMe";
import MineIntention from "./mine/Mine-intention";
import MineTechnology from "./mine/Mine-technology";
import MineWork from "./mine/Mine-works";
import MineTell from "./mine/Mine-tell";
export default {
  mounted() {
     if( this.$route.query.id==1){ 
      this.one()
     this.$refs.nav.one(1)
     }
    if( this.$route.query.id==3){ 
      this.three()
     this.$refs.nav.three(3)
     }
  
   
  },
  data() {
    return {
      id: "",
    };
  },
  created() {},
  methods: {
    one() {
      this.$refs.hdpbox.style.top = "0";
    },
    two() {
      this.$refs.hdpbox.style.top = "-100%";
    },
    three() {
      this.$refs.hdpbox.style.top = "-200%";
    },
    four() {
      this.$refs.hdpbox.style.top = "-300%";
      setTimeout(() => {
        this.$refs.tg.increase();
      }, 1000);
    },
    five() {
      this.$refs.hdpbox.style.top = "-400%";
    },
    toThree() {
      if (this.id == 3) {
        this.three();
      }
    },
  },
  name: "Mine",
  components: {
    // MineOne,
    MineNav,
    MineAboutMe,
    MineIntention,
    MineTechnology,
    MineWork,
    MineTell,
  },
};
</script>

